import React, { useContext, useEffect, useState } from 'react';
import { Card, Col, Row } from '@douyinfe/semi-ui';
import { API, showError, showNotice, timestamp2string } from '../../helpers';
import { StatusContext } from '../../context/Status';
import { marked } from 'marked';
import '../normalize.css';
import styles from '../index.module.scss';
import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();
  const [statusState] = useContext(StatusContext);
  const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
  const [homePageContent, setHomePageContent] = useState('');

  const displayNotice = async () => {
    const res = await API.get('/api/notice');
    const { success, message, data } = res.data;
    if (success) {
      let oldNotice = localStorage.getItem('notice');
      if (data !== oldNotice && data !== '') {
        const htmlNotice = marked(data);
        showNotice(htmlNotice, true);
        localStorage.setItem('notice', data);
      }
    } else {
      showError(message);
    }
  };

  const displayHomePageContent = async () => {
    setHomePageContent(localStorage.getItem('home_page_content') || '');
    const res = await API.get('/api/home_page_content');
    const { success, message, data } = res.data;
    if (success) {
      let content = data;
      if (!data.startsWith('https://')) {
        content = marked.parse(data);
      }
      setHomePageContent(content);
      localStorage.setItem('home_page_content', content);
    } else {
      showError(message);
      setHomePageContent('加载首页内容失败...');
    }
    setHomePageContentLoaded(true);
  };

  const getStartTimeString = () => {
    const timestamp = statusState?.status?.start_time;
    return statusState.status ? timestamp2string(timestamp) : '';
  };

  useEffect(() => {
    displayNotice().then();
    displayHomePageContent().then();
  }, []);
  return (
    <div className={styles.landingPage}>
      <div className={styles.frame731}>
        <div className={styles.rectangle333}></div>
        <img className={styles.onlineWorldAmico1}
             src='https://lf3-files.qingfuwucdn.net/obj/inspirecloud-file/baas/tt38q7/d948da3e9e0e987b_1665567139889.png' />
        <p className={styles.text_e9687cca}>稳定的API转发服务</p>
        <p
          className={styles.text_096efa5c}>在这个开放与分享的时代，OpenAI引领了一场人工智能的革命。现在，我们骄傲地向全世界宣布：我们已经完全支持OpenAI的全模型、以及国产各种大模型最令人激动的是，我们已经做好准备，向世界揭晓更强大、更具影响力的GPT-4！</p>
        <div className={styles.group}>
          <div className={styles.solidBlockTextPrimar} onClick={() => navigate('/chat')}>
            <div className={styles.rectangle}></div>
            <p className={styles.text_c5c91808}>立即使用</p>
          </div>
        </div>
        <div className={styles.rectangle_3a438062}></div>
        <p className={styles.text_ad22f185} onClick={() => navigate('/login')}>快速入门</p><img className={styles.group199}
                                                             src='https://lf3-files.qingfuwucdn.net/obj/inspirecloud-file/baas/tt38q7/a39f62780c0e2b2c_1665567142595.png' />
        <p className={styles.text_db084193}>10+&nbsp;AI业务线已经接入&nbsp;</p>
      </div>
      <div className={styles.frame731}>
        <div className={styles.rectangle333}></div>
        <div className={styles.rectangle42}></div>
        <p className={styles.text_3cf4994e}>无忧风控问题</p>
        <p
          className={styles.text_84a126f7}>我们帮您解决所有的「风控」问题，无需承担额度过期或者封号风险，无需再为账号注册、IP受限、付款困难，账单无法支付等烦恼，每日可承接300万刀以上</p>
        <p className={styles.text_77cf3c93}>卓越性能保障</p>
        <p className={styles.text_f7d0ed88}>我们提供卓越的并发处理能力，超高并发不限速，超强自研能力，基于渠道 RPM 和 TPM
          的智能负载均衡算法，响应快速，大幅降低失败率重试率</p>
        <p className={styles.text_d5c22521}>资源高效整合</p>
        <p
          className={styles.text_219606e9}>企业账号资源整合与全球中继专线优化，极大降低接入成本与使用难度，完全兼容各个平台的接口协议，0开发基础直接无缝对接各种应用。</p>
        <p className={styles.text_eb1a16dc}>----- 关于我们 -----</p>
        <p
          className={styles.text_bd7302fd}>注册即送免费额度可直接使用全模型，1元起充，邀请注册用户充值可得返现，另外推荐企业客户可获巨额红包返现，具体请咨询客服！</p>

      </div>

      <div className={styles.footer1}>
        <p className={styles.text_0fce1d9e}>&nbsp;2024-2025&nbsp;极客-GEEK</p>
        <div className={styles.link}>
          <p className={styles.text_8d382d86} onClick={() => navigate('/log')}>更新日志</p>
          <p className={styles.text_8d382d86} onClick={() => navigate('/doc')}>帮助文档</p>
          <p className={styles.text_8d382d86} onClick={() => navigate('/kefu')}>平台客服</p>
          <p className={styles.text_8d382d86} onClick={() => navigate('/jy')}>反馈建议</p>
        </div>
      </div>
    </div>
  );
};

export default Home;
